import React, { useState, useEffect } from 'react';
import { getGoodData, addGood, xgGood } from '../../../apis/gooddata/gooddata';
import { getGoods } from '../../../apis/goods/goods';
import { getStype } from '../../../apis/servicetype/servicetype';
import { UploadOutlined } from '@ant-design/icons';
import {
  Table,
  Button,
  Input,
  Select,
  Drawer,
  InputNumber,
  TreeSelect,
  Radio,
  Form,
  Upload,
  message,
} from 'antd';
export default function goods() {
  const { Option } = Select;
  const columns = [
    {
      title: '图片',
      dataIndex: 'photo',
      key: 'photo',
      render: (record) => {
        return (
          <img
            src={record.photo}
            alt=""
            style={{ width: '50px', height: '50px' }}
          />
        );
      },
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '商品类型',
      dataIndex: 'gname',
      key: 'gname',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (record) => {
        return record.status ? '下架' : '上架';
      },
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '数量',
      dataIndex: 'counts',
      key: 'counts',
    },
    {
      title: '操作',
      render: (tags) => (
        <>
          <Button onClick={() => changegoods(tags)}>修改</Button>
        </>
      ),
    },
    {
      title: '秒杀',
      render: (tags) => (
        <>
          <Button>加入秒杀</Button>
        </>
      ),
    },
  ];
  const tailLayout = {
    wrapperCol: {
      offset: 16,
      span: 8,
    },
  };
  const [visible, setVisible] = useState(false);
  const [state, setState] = useState();
  const [goodsData, setGoodsData] = useState();
  const [value, setValue] = useState(1);
  const [Stypedata, setStypeDate] = useState();
  const [photo, setPhoto] = useState();
  //修改数据保存
  const [xgdata, setXgdata] = useState();
  //修改商品id
  const [id, setId] = useState();
  //修改后的数据保存
  const [data, setData] = useState();
  //修改框
  const [vb, setVb] = useState(false);
  useEffect(() => {
    getData();
    getGoodsData();
    gettypedata();
  }, []);
  //获取所有分类商品
  const getData = async () => {
    const res = await getGoodData();
    console.log('1111', res.data.rows);
    setState(res.data.rows);
  };
  //获取所有商品
  const getGoodsData = async () => {
    const res = await getGoods();
    setGoodsData(res.data.rows.children);
  };
  //获取所有服务类别
  const gettypedata = async () => {
    const res = await getStype();
    setStypeDate(res.data.rows.children);
  };
  const onclose = () => {
    setVisible(false);
  };
  const onChangeDrawer = () => {
    setVisible(true);
  };
  const [componentSize, setComponentSize] = useState('default');

  const onFormLayoutChange = ({ size }) => {
    setComponentSize(size);
  };
  const onChange = (e) => {
    console.log(e.target.value);
    setValue(e.target.value);
  };
  //修改商品
  const changegoods = (tags) => {
    setVb(true);
    console.log(tags);
    setXgdata(tags);
    setId(tags.id);
  };
  const onClose = () => {
    setVb(false);
  };
  //修改提交
  const xgonFinish = async (values) => {
    console.log(values);
    const res = await xgGood({
      ...values,
      id,
    });
    if (res.status == 200) {
      message.success('修改成功');
    } else {
      message.error('修改失败');
    }
  };

  //图片上传
  const props = {
    name: 'file',
    action: 'http://47.98.128.191:3000/images/uploadImages',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
        setPhoto(info.file.response.data[0]);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  //新增商品
  const onFinish = async (values) => {
    const res = await addGood({
      ...values,
      status: value,
      photo,
    });
    if (res.status == 200) {
      message.success('添加成功');
    } else {
      message.error('添加失败');
    }
    setVisible(false);
  };
  return (
    <div>
      <div
        style={{
          width: '1650px',
          paddingTop: '20px',
        }}
      >
        商品名称：
        <Input
          style={{ width: '150px', marginRight: '50px' }}
          placeholder="请输入商品名称"
        ></Input>
        商品状态：
        <Select style={{ width: '150px', height: '50px', marginRight: '20px' }}>
          <Option value="上架">上架</Option>
          <Option value="下架">下架</Option>
        </Select>
        商品类型：
        <Select style={{ width: '150px', height: '50px' }}>
          <Option value="上架">上架</Option>
          <Option value="下架">下架</Option>
        </Select>
      </div>
      <div style={{ width: '1650px', height: '60px' }}>
        <Button style={{ marginRight: '20px' }}>查询</Button>
        <Button>重置</Button>
      </div>
      <div>
        <Button
          style={{
            marginRight: '20px',
            marginBottom: '20px',
            backgroundColor: '#1890ff',
            color: 'white',
          }}
          onClick={onChangeDrawer}
        >
          新增
        </Button>
        <Button>删除</Button>
      </div>
      <div style={{ width: '1650px' }}>
        <Table
          pagination={{
            defaultCurrent: 1,
            defaultPageSize: 6,
            pageSizeOptions: [4, 6],
            showSizeChanger: true,
          }}
          style={{ width: '1700px' }}
          columns={columns}
          dataSource={state}
        />
      </div>
      <Drawer
        title="新增商品"
        placement="right"
        onClose={onclose}
        visible={visible}
        maskClosable
      >
        <Form
          name="control-hooks"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 12,
          }}
          layout="horizontal"
          initialValues={{
            size: componentSize,
          }}
          onValuesChange={onFormLayoutChange}
          size={componentSize}
          onFinish={onFinish}
        >
          <Form.Item label="商品名称" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="商品类型" name="goodsTypeId">
            <TreeSelect treeData={goodsData} />
          </Form.Item>
          <Form.Item label="服务类型" name="serviceTypeId">
            <TreeSelect treeData={Stypedata} />
          </Form.Item>
          <Form.Item label="价格" name="price">
            <InputNumber />
          </Form.Item>
          <Form.Item label="数量" name="counts">
            <InputNumber />
          </Form.Item>
          <Radio.Group onChange={onChange} value={value}>
            <Radio value={1}>上架</Radio>
            <Radio value={2}>下架</Radio>
          </Radio.Group>
          {/* 图片上传 */}
          <Form.Item label="图片上传">
            <Upload {...props}>
              <Button icon={<UploadOutlined />}>Click to Upload</Button>
            </Upload>
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
      <Drawer title="修改商品" placement="right" onClose={onClose} visible={vb}>
        <Form
          name="control-hooks"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 12,
          }}
          layout="horizontal"
          initialValues={{
            size: componentSize,
          }}
          onValuesChange={onFormLayoutChange}
          size={componentSize}
          onFinish={xgonFinish}
        >
          <Form.Item label="商品名称" name="name">
            <Input.TextArea defaultValue={xgdata != null ? xgdata.name : ''} />
          </Form.Item>
          <Form.Item label="商品类型" name="goodsTypeId">
            <TreeSelect
              treeData={goodsData}
              defaultValue={xgdata != null ? xgdata.gname : ''}
            />
          </Form.Item>
          <Form.Item label="服务类型" name="serviceTypeId">
            <TreeSelect
              treeData={Stypedata}
              defaultValue={xgdata != null ? xgdata.sname : ''}
            />
          </Form.Item>
          <Form.Item label="状态" name="status">
            <Select
              defaultValue={
                xgdata != null ? (xgdata.status == 1 ? '上架' : '下架') : ''
              }
            >
              <Option value="1">上架</Option>
              <Option value="2">下架</Option>
            </Select>
          </Form.Item>
          <Form.Item label="价格" name="price">
            <InputNumber defaultValue={xgdata != null ? xgdata.price : ''} />
          </Form.Item>
          <Form.Item label="数量" name="counts">
            <InputNumber defaultValue={xgdata != null ? xgdata.counts : ''} />
          </Form.Item>
          {/* 图片上传 */}
          {/* <Form.Item label="商品图片">
            <Upload {...props}>
              <Button icon={<UploadOutlined />}>Click to Upload</Button>
            </Upload>
          </Form.Item> */}

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}
